<template>
  <div class="head-title">
    <van-nav-bar left-text="返回" :title="title"  left-arrow fixed  @click-left="onClickLeft" />

    <van-search
      v-model="titleName"
      show-action
      placeholder="电影名称"
      v-show ='this.typeid == 0'
    >
      <template #action>
        <div @click="onSearch()">搜索</div>
      </template>
    </van-search>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad">
      <!-- <router-link :to="{path:'/overWorkNote', query: {Id:item.id}}"> -->
      <van-cell v-for="(item,index) in list" :key="index" @click="goNOte(index)">
        <van-row>
          <van-col span="8">
              <img :src="item.playbill_url" class="nav_img"  alt="tupian"  />
          </van-col>
          <van-col span="16" class ='valspan'>
            <span>{{item.title}}</span>
            <span>{{item.fileName}}</span>
            <span>{{item.Date}}</span>
          </van-col>
        </van-row>
      </van-cell>

      <van-cell v-for="(item,index) in list2" :key="index" @click="goNOte2(index)">
        <van-row>
          <van-col span="24" class ='valspan'>
            <span>{{item.fileTitle}}</span>
            <!-- 
            <span>{{item.fileID}}</span> 
            -->
            <span>{{item.last_Playtime}}</span>
          </van-col>
        </van-row>
      </van-cell>

       <van-cell v-for="(item,index) in list3" :key="index" @click="goNOte3(index)">
        <van-row>
          <!--
          <van-col span="8">
              <img :src="item.playbill_url" class="nav_img"  alt="tupian"  />
          </van-col> 
          -->
          <van-col span="24" class ='valspan'>
            <span>{{item.fileTitle}}</span>
            <span>{{item.fileUrl}}</span>
            <!-- 
            <span>{{item.last_Playtime}}</span> 
            -->
          </van-col>
        </van-row>
      </van-cell>

    </van-list>
  </div>
</template>

<script>

// import iconall from "@/assets/Image/all.png";
// import iconall01 from "@/assets/Image/all01.png";
// import iconcheck from "@/assets/Image/check.png";
// import iconcheck01 from "@/assets/Image/check01.png";
// import iconready from "@/assets/Image/ready.png";
// import iconready01 from "@/assets/Image/ready01.png";
// import iconsumbit from "@/assets/Image/sumbit.png";
// import iconsumbit01 from "@/assets/Image/sumbit01.png";

export default {
  data() {
    return {
      list: [],
      list2:[],
      list3:[],
      loading: false,
      finished: false,
      title: "",
      Lote:'',
      // showSearch:false
      titleName:'',
      typeid:''
    };
  },
  methods: {
    
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    //获取文件
    GetFiles() {
      let Id = this.$route.query.id;
      console.log(Id);
      this.$axios({
        method: "get",
        url: "/api/User/GetFiles",
        params: {
          categoryid: Id
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            // console.log(res.data.data);
            for (var i = 0; i < res.data.data.length; i++) {
                 res.data.data[i].Date =  new Date(res.data.data[i].updateTime).toLocaleDateString();
                 this.list = res.data.data;
            }
          }
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取收藏
    GetUserFavorites() {
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      this.$axios({
        method: "post",
        url: "/api/User/GetUserFavorites",
        headers: {sessionKey:PWD.sessionKey,authorization:PWD.token},
      })
        .then(res => {
          if (res.data.code === 0) {
            this.list2 = res.data.data 
          }
          if (res.data.code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goNOte(index) {
      // this.$router.push("./overWorkNote");
      this.$router.push({
        path: "/overWorkNote",
        query: {
          ID: this.list[index].id,
          title: this.list[index].title,
          categoryTitle: this.title,
          id:this.$route.query.id  
        }
      });
    },
    goNOte2(index) {
      // this.$router.push("./overWorkNote");
      this.$router.push({
        path: "/overWorkNote",
        query: {
          ID: this.list2[index].fileID,
          // title: this.list2[index].title,
          // categoryTitle: this.title,
          id:this.$route.query.id,
          Lote:0  
        }
      });
    },
    goNOte3(index) {
      this.$router.push({
        path: "/overWorkNote",
        query: {
          ID: this.list3[index].fileID,
          // title: this.list2[index].title,
          // categoryTitle: this.title,
          id:this.$route.query.id,
          Lote:1  
        }
      });
    },
    onSearch(){
       this.searchVideo();
    },
    //搜素页面德Video
    searchVideo(){
      this.$axios({
        method: "get",
        url: "/api/User/GetAllFilesByType",
        // data:Data
         params: {
          titleName: this.titleName,
          typeid: 0 
        }
      })
        .then(res => { 
          //
          if (res.data.code === 0) {
              if(res.data.data.length == 0){
                   this.$toast({
                      duration: 800,
                      message: '没有搜到相关作品，请重新搜索'
                    });
              }else{
                 for (var i = 0; i < res.data.data.length; i++) {
                    res.data.data[i].Date =  new Date(res.data.data[i].updateTime).toLocaleDateString();
                    this.list = res.data.data;
                 }
              }
          }
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //返回
    onClickLeft(){
      this.Lote = this.$route.query.Lote;
      if( this.Lote == 0 || this.Lote == 1 ){
         this.$router.push("/PerCenter");
      }else{
          this.$router.push("/home");
      }
    }
  },
  //页面初始化钩子函数 created
  created() {
    this.GetFiles();
    this.title = this.$route.query.title;
    this.typeid = this.$route.query.typeid;
    this.titleName = this.$route.query.titleName;
    // typeid: this.$route.query.typeid
    //从搜索跳转进入会调用一下方法
    if(this.typeid  == 0 ){
      this.searchVideo();
    }
    // this.isActive = 0;
    this.$emit("header", false);
    this.$emit("footer", false);
  },
  //页面初始化钩子函数 mounted
  mounted() {
    const PWD = JSON.parse(sessionStorage.getItem("PWD"));
    this.Lote = this.$route.query.Lote;
    //获取观看历史
    if(this.Lote == 0 ){
       //观看历史信息在登录信息的userFavoriteList
       this.list2 = PWD.historyPlayList
       console.log( this.list2);
    }
    //获取收藏历史
    if(this.Lote == 1){
      this.list3 = PWD.userFavoriteList
      //  this.GetUserFavorites();
      //  console.log('dd');
    }
  }
};
</script>
<style lang="less" scoped>
.valspan{
  margin-top: 10px;
  span{
    display: block;
  }
}
.nav_img{
  width: 100px;
  height: 60px;
  margin: 5px;
}
.valspan{
  padding-left: 50px;
}
</style>

